<template>
    <div class="parallax-scrolling-container">
        <main class="parallax-scrolling-content" :style="{ '--col': columnNum }">
            <section class="parallax-scrolling-list" v-for="col in columnNum" :style="{ '--r':deltaY*100+'%'}">
                <img class="parallax-scrolling-item" v-for="(item, i) in imgList" :src=item>
            </section>
        </main>

    </div>
</template>

<script>

export default {
    name: "ParallaxScrollingAlbum",
    data() {
        return {
            MaxHeight: 0,
            TotalDeltaY: 0,
            columnNum: 3,
            imgList: [
                "/img/style/dm_ocean.jpg",
                "/img/style/dm_road.jpg",
                "/img/style/flower_pink.jpg",
                "/img/style/road_657.jpg",
                "/img/style/sea_llk.jpg",
                "/img/style/dm_road.jpg",
                "/img/style/flower_pink.jpg",
                "/img/style/road_657.jpg",
                "/img/style/dm_road.jpg",
            ],
        }
    },

    computed: {
        deltaY() {
            if (this.MaxHeight === 0) {
                return 0
            }
            return this.TotalDeltaY / (this.MaxHeight);
        },
    },
    methods: {
        onmousewheel(e) {
            this.TotalDeltaY += e.deltaY;
            if (this.TotalDeltaY < -this.MaxHeight/3) {
                this.TotalDeltaY = -this.MaxHeight/3;
            }
            if (this.TotalDeltaY > this.MaxHeight/3) {
                this.TotalDeltaY = this.MaxHeight/3;
            }
        },
    },
    mounted() {
        const content = this.$el.querySelector(".parallax-scrolling-content");
        content.addEventListener("wheel", this.onmousewheel);
        const list = this.$el.querySelector(".parallax-scrolling-list");
        this.MaxHeight = list.offsetHeight;
    },
    beforeUnmount() {
        const content = this.$el.querySelector(".parallax-scrolling-content");
        content.removeEventListener("wheel", this.onmousewheel);

    },
}
</script>

<style scoped>
.parallax-scrolling-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-scrolling-content {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(var(--col), 500px);
    padding: 50px;
    height: 100%;
    overflow-y: hidden;
}

.parallax-scrolling-list {
    display: flex;
    gap: 2rem;
}

.parallax-scrolling-list:nth-child(odd) {
    translate: 0% calc(-33% - var(--r));
    flex-direction: column-reverse;
}

.parallax-scrolling-list:nth-child(even) {
    translate: 0% calc(-33% + var(--r));
    flex-direction: column;
}

.parallax-scrolling-item {
    box-shadow: 0 0 10px #0002;
    border-radius: 5px;
    transition: 0.3s;
    height: 300px;
}

.parallax-scrolling-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(150, 50, 50, 0.5);
}

</style>
